<template>
  <div class="showInfo">
    <!--循环显示获取的日报-->
    <div
      class="chatDiv"
      v-for="(item, index) in showingInfo"
      :key="index"
      style="margin-bottom: 20px"
    >
      <div class="headImg">
        <!-- 设置点击头像进入分组管理，此功能仅在单人模式下生效 -->
        <img
          class="myHeadIcon"
          v-bind:src="item.avatar"
          @click="showRepoOfThisStudent(item)"
        />
        <br />
        <label class="name">{{ item.userName }}</label>
        <br />
        <span class="place">{{ item.place }}</span>
      </div>
      <span class="triangle"></span>

      <div class="content">
        <slot class="timeStatistics" name="statistics">
          <img
            src="~static/img/put_time.png"
            height="13"
            width="13"
            alt="提交"
            style="font-size: 12px; color: gray; color: rgb(191, 191, 191)"
          />
          <span style="font-size: 14px; color: gray"
            >{{ item.insertTime[0] }} {{ item.insertTime[1] }}&nbsp;&nbsp;</span
          >
          <span style="font-size: 12px; color: gray; color: rgb(191, 191, 191)"
            >学习</span
          >
          <span style="font-size: 14px; color: gray"
            >{{ item.timeCostStudy }}h</span
          >
          <span style="font-size: 12px; color: gray; color: rgb(191, 191, 191)"
            >有效产出</span
          >
          <span style="font-size: 14px; color: gray"
            >{{ item.timeCostOutput }}h</span
          >
        </slot>

        <!-- <br v-if="!isShowPopover(item, 2)" /> -->
        <div class="content-detail">
          <slot class="date" name="contentSlot">日报日期： {{ item.date.slice(5, 10) }}</slot>

          <!-- <popover placement="left" v-if="isShowPopover(item, 2)">
            <div
              slot="content"
              class="popover-demo-content"
              style="padding: 8px; border-radius: 5px"
            >
              <span
                @click="modifyReport(item)"
                style="line-height: 30px; padding: 8px; color: white"
                >修&nbsp;改</span
              >
              <br />
              <span
                @click="deleteReport(item)"
                style="line-height: 30px; padding: 8px; color: white"
                >删&nbsp;除</span
              >
            </div>
            <button class="btn btn-default">
              <i class="fa fa-ellipsis-v"></i>
            </button>
          </popover> -->

          <span v-for="(item_in, index) in item.activities" :key="index">
            <div style="margin: 3px">
              <span
                class="tag"
                style="
                  margin-left: 1px;
                  margin-bottom: 5px;
                  margin-top: 5px;
                  letter-spacing: 0.5px;
                "
                >{{ item_in.typeContent }}</span
              >
              <span style="font-size: small; color: rgb(191, 191, 191)"
                >{{ item_in.startTime }}--{{ item_in.endTime }}</span
              >
              <span style="color: gray">（{{ item_in.timeCost }}h）</span>
              <br />
              <span
                style="
                  color: grey;
                  font-size: small;
                  font-family: '微软雅黑';
                  letter-spacing: 0.5px;
                  word-wrap: break-word;
                  white-space: normal;
                "
                >{{ item_in.content }}</span
              >
              <br />
            </div>
          </span>
          <div v-if="item.target" style="margin: 3px">
            <span
              class="tag"
              style="
                margin-bottom: 5px;
                margin-top: 10px;
                letter-spacing: 0.5px;
              "
              >明日计划:</span
            >
            <span
              style="
                color: grey;
                font-size: small;
                font-family: '微软雅黑';
                letter-spacing: 0.5px;
                word-wrap: break-word;
                white-space: normal;
              "
              >{{ item.target }}</span
            >
          </div>
        </div>
        <br />
        <slot name="comment"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showingInfo: {
      type: Object,
      default: [
        {
          avatar:
            "https://thirdwx.qlogo.cn/mmopen/vi_32/270T9KAFd4rvmkp5O5o0rfO1In6HFVOvDWs76EyWHDXteNvRDQm5RwO1msC952c11bd05tW7Sc6r0S29RiaRoDQ/132",
          userName: "wp",
          place: "四川",
          activities: [
            {
              typeContent: "haha",
              startTime: "09:00",
              endTime: "12:00",
              timeCost: 15,
              content: "hahahhahha",
              impression: "11111111111",
            },
          ],
          target: "555555555",
          date: "2020-11-12",
          insertTime: "2020-11-12 12:00",
        },
        {
          avatar:
            "https://thirdwx.qlogo.cn/mmopen/vi_32/270T9KAFd4rvmkp5O5o0rfO1In6HFVOvDWs76EyWHDXteNvRDQm5RwO1msC952c11bd05tW7Sc6r0S29RiaRoDQ/132",
          userName: "wp",
          place: "四川",
          activities: [
            {
              typeContent: "haha",
              startTime: "09:00",
              endTime: "12:00",
              timeCost: 15,
              content: "hahahhahha",
              impression: "11111111111",
            },
          ],
          target: "555555555",
          date: "2020-11-12",
          insertTime: "2020-11-12 12:00",
        },
        {
          avatar:
            "https://thirdwx.qlogo.cn/mmopen/vi_32/270T9KAFd4rvmkp5O5o0rfO1In6HFVOvDWs76EyWHDXteNvRDQm5RwO1msC952c11bd05tW7Sc6r0S29RiaRoDQ/132",
          userName: "wp",
          place: "四川",
          activities: [
            {
              typeContent: "haha",
              startTime: "09:00",
              endTime: "12:00",
              timeCost: 15,
              content: "hahahhahha",
              impression: "11111111111",
            },
          ],
          target: "555555555",
          date: "2020-11-12",
          insertTime: "2020-11-12 12:00",
        },
      ],
    },
  },
};
</script>

<style lang='less' scoped>
.showInfo {
  .chatDiv {
    display: flex;
    border: 1px solid #c8c7cc;
    border-radius: 5px;
    box-shadow: 0px 2px 3px #c8c7cc;
    padding: 5px;
    .headImg {
      display: inline-block;
      width: 50px;
      height: auto;
      padding: 0;
      text-align: center;
      margin-left: 5px;
      border: 0px;
      background-color: rgb(237, 237, 237);
      .myHeadIcon {
        display: inline-block;
        width: 47px;
        height: 47px;
        margin-top: 0px;
      }
      .name {
        font-family: "华文楷体";
        color: rgb(136, 136, 136);
      }
      .place {
        font-family: "微软雅黑";
        font-size: 14px;
        color: gray;
      }
    }
    .triangle {
      margin-left: -10px;
      margin-right: -5px;
      margin-top: 25px;
      display: inline-block;
      height: 0;
      width: 0;
      border: 10px solid transparent;
      border-right: 10px solid white;
    }
    .content {
      // line-height: 20px;
      width: 100%;
      margin-right: 10px;
      .timeStatistics {
        max-height: 25px;
        background-color: #ededed;
        margin-top: -3px;
      }
      .content-detail {
        background-color: white;
        border-radius: 5px;
        padding: 5px;
        color: #C1C1C1;
          font-size: 14px;
        .date {
          float: left;
        }
        // p {
        //   margin-left: 1px;
        //   margin-bottom: 5px;
        //   margin-top: 10px;
        //   letter-spacing: 0.5px;
        //   color: grey;
        //   font-size: small;
        //   font-family: "微软雅黑";
        //   letter-spacing: 0.5px;
        //   margin: 5px;
        //   span {
        //     font-size: small;
        //     color: rgb(191, 191, 191);
        //   }
        // }
      }
    }
  }
}
</style>